<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar
        title="新增或编辑作品"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <van-cell-group>
        <van-field
          v-model="formData.name"
          required
          clearable
          label="名称"
          placeholder="请输入作品名称"
        />
        <p class="field-title is-require">作品简介</p>
        <van-field
          type="textarea"
          v-model="formData.introduction"
          clearable
          :autosize="{maxHeight: '100', minHeight: '100'}"
          placeholder="请输入作品简介"
        />
        <van-field
          label="作品链接"
          v-model="formData.link"
          required
          placeholder="请输入作品链接"
        />
        <p class="field-title is-require">作品简介</p>
        <p class="field-title-tips">请根据个人需要选择是否上传图片，最多3张</p>
        <zx-upload-img action="" :max-count="3" :multiple="true" :max-size="1024000" v-model="formData.imgList"></zx-upload-img>
      </van-cell-group>
      <div class="button">
        <van-button size="large" @click="handleSubmit">提交认证</van-button>
      </div>

    </div>
  </div>
</template>
<script>
  import validator from '../../../common/validatorFunction';
  import zxUploadImg from '../../../components/zx-upload-img.vue'

  export default {
    name: 'addTheWork',
    components: {
      zxUploadImg
    },
    data(){
      return {
        isShowError: false,
        errorTips: '',
        formData: {
          name: '',
          link: '',
          suggestion: '',
          imgList: ['https://img.yzcdn.cn/2.jpg']
        },
        rules: {
          name: [
            {require: true, message: '请输入作品名称'}
          ],
          link: [
            {require: true, message: '请输入作品链接'}
          ],
          introduction: [
            {require: true, message: '请输入作品简介'}
          ]
        }
      }
    },
    mounted() {
//      let i = 0;
//      while (i < 100) {
//        i++;
//        this.ageList[0].values.push(i);
//      }
//      console.log('进入页面');
    },
    methods: {
      onRead(file) {
        console.log(file)
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      confirm(columnsNum) {
        this.showArea = false;
        let area = '';
        columnsNum.forEach(item => {
          area += item.name + ' ';
        })
        this.formData.area = area;
      },
      cancel() {
        this.showArea = false;
      },
      handleSubmit() {
        // 保存数据
        const rulesResult = validator(this.formData, this.rules);
        console.log(rulesResult);
        if (rulesResult.result) {
          // 校验成功，保存信息
          // const res = await server.postIdData(this.formData);
          // if (res && res.data && res.data.code === 200) {
          //     this.$router.push('/information-data');
          // }
        } else {
          const alertMessage = [];
          for (const key in rulesResult.detail) {
            if (!rulesResult.detail[key].isPass) {
              alertMessage.push(rulesResult.detail[key].message);
            }
          }
          this.isShowError = true;
          this.errorTips = alertMessage[0];
          this.$toast({message:this.errorTips, position: 'middle'});
        }
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../../static/style/var');
  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }
  .field-title {
    padding: 10px 15px;
    color: #333333;
  }
  .field-title-tips {
    padding: 0px 15px 5px;
    font-size: @weak-tips-size;
    color: @weak-tips-color;
  }

</style>
